<template>
	<view>
		<!-- 头部固定区域 -->
		<!-- <view class="topPlay" :style="{height: navHeight + topHeight + 'px'}">
			<view class="top" :style="{height: topHeight + 'px'}"></view>
			<view class="mid" :style="{height: navHeight + 'px'}">
				<view class="homePage">背单词</view>
			</view>
		</view> -->
		
		<!-- 搜索框区域 -->
		<view class="topSearch" :style="{marginTop: navHeight + topHeight + 'px'}">
			<view class="searchbar" @click="toSearch">
				<view class="searchIcon">
					<image src="@/static/images/other/search.png"></image>
					<text class="searchDesc">查词</text>
				</view>
			</view>
			<view class="calendar" @click="toMyCalendar">
				<image src="@/static/images/other/calendar.png"></image>
			</view>
		</view>
		
		<!-- 主体部分区域 -->
		<view class="midMain">
			<!-- 上部今日单词和剩余天数区域 -->
			<view class="numShow">
				<view class="dayWord">
					<text class="chinese">今日单词</text>
					<text class="num">{{indexData.dayWord}}</text>
				</view>
				<view class="dayWord">
					<text class="chinese">剩余天数</text>
					<text class="num">{{indexData.remainDay}}</text>
				</view>
				<view class="dayWord"> </view>
			</view>
			<!-- 中部书名和调整计划区域 -->
			<view class="bookName">
				<view class="left">
					<view class="name">{{indexData.studyBook}}</view>
					<view class="desc" :style="{'color':themeColor}">{{indexData.bookDesc}}</view>
				</view>
				<view class="right" @click="toPlan">
					<view class="adjustMent">调整计划</view>
				</view>
			</view>
			<!-- 底部学习进度区域 -->
			<view class="learnRate">
				<view class="topDesc">
					<view class="left">
						<view class="chinese">学习进度</view>
						<view class="num">{{indexData.totalHaveStudyNum}}/{{indexData.totalNum}}</view>
					</view>
					<view class="right" @click="toList">
						<image src="@/static/images/other/wordList.png"></image>
						<text>单词列表</text>
					</view>
				</view>
				<view class="progress">
					<progress v-if="indexData.totalHaveStudyNum != null && indexData.totalNum != null" :percent="indexData.totalHaveStudyNum * 100/indexData.totalNum" border-radius="6" :activeColor="themeColor" backgroundColor="#EBEBEB"></progress>
				</view>
			</view>
		</view>
		
		<!-- 底部按钮区域 -->
		<view class="bottomButton">
			<view class="topWord">
				<view class="newStudy">今日需新学{{indexData.dayHaveStudyNum}}/{{indexData.dayWord}}</view>
				<view class="review">今日需复习{{indexData.reviewNum}}</view>
			</view>
			<view class="reciteButton" @click="toRecite" :style="{'backgroundColor':themeColor}">
				<view class="word">Going!</view>
			</view>
			<view class="distinguish" @click="toImageTranslate" :style="{'backgroundColor':themeColorLess}">
				<view class="word" :style="{'color':themeColor}">图像识别</view>
			</view>
		</view>
		<!-- 提示信息弹窗 -->
		<popup ref="popup"></popup>
	</view>
</template>

<script>
	import {indexData} from "@/api/indexApi.js";
	import {dayWordIds} from "@/api/word.js";
	import popup from "@/components/popup.vue";
	export default {
		
		data() {
			return {
				topHeight:0,
				navHeight:0,
				indexData:{},
				themeColor:"",
				themeColorLess:"",
			}
		},
		methods: {
			async toRecite(){
				let ans = ("今日单词id:",await dayWordIds()).data;
				console.log(ans);
				if (ans.data == null) {
					this.$refs.popup._popWarn("今日计划单词已学完");
					return;
				}
				uni.setStorageSync("wordIds",ans.data.wordIds);
				uni.navigateTo({
					url:"/pages/recite/recite?wordIndex=0"
				})
			},
			toList(){
				uni.navigateTo({
					url:"/pages/list/list?bookId="+this.indexData.bookId+"&type=1",
				})
			},
			toMyCalendar(){
				uni.navigateTo({
					url:"/pages/my/calendar/calendar"
				})
			},
			toImageTranslate(){
				uni.navigateTo({
					url:"/pages/imageTranslate/imageTranslate"
				})
			},
			toPlan(){
				uni.navigateTo({
					url:"/pages/plan/plan"
				})
			},
			toSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			}
		},
		onLoad() {
			let color = uni.getStorageSync("color");
			this.themeColor = JSON.parse(color).themeColor;
			this.themeColorLess = JSON.parse(color).themeColorLess;
		},
		async onShow(){
			if (!getApp().globalData.switchIndex) return;
			getApp().globalData.switchIndex = false;
			let ans = (await indexData()).data;
			console.log("indexData:",ans);
			if (ans.code != 200) {
				this.$refs.popup._popError(ans.error);
				setTimeout(()=>{
					uni.navigateTo({
						url:"/pages/login/login"
					})
				},1000)
				return;
			}
			this.indexData = ans.data;
		},
		components:{popup},
	}
</script>

<style lang="scss">
	page{
		background-color: $bg-color;
	}
	// 头部固定区域
	.topPlay{
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 100;
		
		.top{
			width: 100%;
			background-color: $bg-color;
		}
		
		.mid{
			width: 100%;
			background-color: $bg-color;
			position: relative;
			
			.backIcoB{
				padding-left: $both-sides;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				font-size: 28rpx;
			}
			.homePage{
				font-size: 32rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
			}
		}
	}
	
	// 搜索框区域
	.topSearch{
		margin: 0 $both-sides;
		display: flex;
		align-items: center;
		.searchbar{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 60rpx;
			background-color: white;
			border-radius: 30rpx;
			width: calc(100% - 76rpx);
			
			.searchIcon{
				display: flex;
				align-items: center;
				image{
					height: 36rpx;
					width: 36rpx;
				}
				
				.searchDesc{
					display: block;
					height: $searchbar-height;
					line-height: $searchbar-height;
					padding-left: 14rpx;
					color: #9DA7B9;
					font-size: $searchbar-fontSize;
				}
			}
		}
		.calendar{
			margin-left: 30rpx;
			height: 46rpx;
			
			image{
				height: 46rpx;
				width: 46rpx;
			}
		}
	}
	
	// 主体部分区域
	.midMain{
		margin: 50rpx $both-sides 0 $both-sides;
		background-color: white;
		border-radius: 12rpx;
		
		// 上部今日单词和剩余天数区域
		.numShow{
			padding: 50rpx $both-sides 0 $both-sides;
			display: flex;
			justify-content: space-between;
			.dayWord{
				display: flex;
				flex-direction: column;
				
				.chinese{
					font-size: 28rpx;
					color: #283044;
					font-weight: 550;
					letter-spacing: 4rpx;
				}
				.num{
					padding-top: 36rpx;
					font-size: 76rpx;
					color: #283044;
					font-style: italic;
					font-weight: 800;
				}
			}
		}
		
		// 中部书名和调整计划区域
		.bookName{
			padding: 50rpx $both-sides 0 $both-sides;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.left{
				display: flex;
				flex-direction: column;
				
				.name{
					font-size: 28rpx;
					color: #283044;
					font-weight: 550;
				}
				.desc{
					font-size: 24rpx;
					padding-top: 14rpx;
				}
			}
			.right{
				height: 50rpx;
				width: 160rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: $bg-color;
				border-radius: 25rpx;
				
				.adjustMent{
					font-size: 22rpx;
					font-weight: 500;
				}
			}
		}
		
		// 底部学习进度区域
		.learnRate{
			margin: 30rpx $both-sides 0 $both-sides;
			padding-top: 30rpx;
			border-top: solid $border-color $border-size;
			
			.topDesc{
				color: #8d929a;
				display: flex;
				justify-content: space-between;
				
				.left{
					display: flex;
					font-size: 24rpx;
					line-height: 40rpx;
					.num{
						padding-left: 8rpx;
					}
				}
				.right{
					display: flex;
					flex-direction: column;
					align-items: center;
					
					image{
						height: 50rpx;
						width: 50rpx;
					}
					text{
						font-size: 16rpx;
					}
				}
			}
			
			.progress{
				padding: 20rpx 0 50rpx 0;
			}
		}
	}
	
	// 底部按钮区域
	.bottomButton{
		margin: 90rpx $both-sides 0 $both-sides;
		display: flex;
		flex-direction: column;
		
		.topWord{
			font-size: 24rpx;
			color: #8d929a;
			display: flex;
			justify-content: center;
			
			.review{
				padding-left: 10rpx;
			}
		}
		.reciteButton{
			width: 100%;
			height: 100rpx;
			border-radius: 10rpx;
			margin-top: 26rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.word{
				color: white;
				font-size: 36rpx;
				font-weight: 600;
				letter-spacing: 3rpx;
			}
		}
		.distinguish{
			width: 100%;
			height: 80rpx;
			border-radius: 10rpx;
			margin-top: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.word{
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	}
	
</style>
